<template>
    <slot name="columnPrepend"></slot>
    <template v-for="item in columns" :key="item.prop">
        <template v-if="item.show !== false">
            <el-table-column
                v-if="item.type === 'selection'"
                type="selection"
                :width="isEnabledWidth ? item.width : undefined"
                :align="item.align"
                :fixed="isFixed ? item.fixed : false"
            ></el-table-column>
            <el-table-column
                v-else-if="item.type === 'index'"
                type="index"
                :label="item.label"
                :width="isEnabledWidth ? (item.width ?? '60') : undefined"
                :align="item.align"
                :fixed="isFixed ? item.fixed : false"
            ></el-table-column>
            <el-table-column
                v-else
                :prop="item.prop?.toString()"
                :label="item.label"
                :width="isEnabledWidth ? item.width : undefined"
                :min-width="isEnabledWidth ? item.minWidth : undefined"
                :align="item.align"
                :fixed="isFixed ? item.fixed : false"
                :show-overflow-tooltip="isShowOverflowTooltip ? item.showOverflowTooltip : false"
            >
                <template #default="scope">
                    <ColumnScene :scope="scope" :is-switch="isSwitch" :column="item" @onChange="item.onChange" @onClick="item.onClick"></ColumnScene>
                </template>
            </el-table-column>
        </template>
    </template>
    <el-table-column
        v-if="columnActionTypes && columnActionTypes.length !== 0"
        label="操作"
        :width="actionColumnWidth"
        align="center"
        :fixed="isFixed ? 'right' : false"
    >
        <template #default="{ row }">
            <template v-if="columnActionTypes.includes('dragSort')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/dragSort`)"
                    class="drag-handle"
                    type="info"
                    :link="true"
                    icon-name="icon-darg"
                >
                    排序
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('view')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/view`)"
                    type="info"
                    :link="true"
                    icon-name="el-View"
                    @click="onClick('view', row)"
                >
                    查看
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('add')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/add`)"
                    type="primary"
                    :link="true"
                    icon-name="el-Plus"
                    @click="onClick('add', row)"
                >
                    添加
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('reset')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/reset`)"
                    type="primary"
                    :link="true"
                    icon-name="el-RefreshLeft"
                    @click="onClick('reset', row)"
                >
                    密码重置
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('download')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/download`)"
                    type="primary"
                    :link="true"
                    icon-name="icon-download"
                    @click="onClick('download', row)"
                >
                    下载
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('edit')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/edit`)"
                    type="primary"
                    :link="true"
                    icon-name="el-Edit"
                    @click="onClick('edit', row)"
                >
                    编辑
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('assign')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/assign`)"
                    type="warning"
                    :link="true"
                    icon-name="el-UserFilled"
                    @click="onClick('assign', row)"
                >
                    分配权限
                </BaseButton>
            </template>

            <template v-if="columnActionTypes.includes('delete')">
                <BaseButton
                    v-if="authButtons.includes(`${controllerUrl}/delete`)"
                    type="danger"
                    :link="true"
                    icon-name="el-Delete"
                    @click="onClick('delete', row)"
                >
                    删除
                </BaseButton>
            </template>
        </template>
    </el-table-column>
    <slot name="columnAppend"></slot>
</template>

<script setup lang="ts">
import { ControllerType } from '@/api/common/types'

interface Props {
    columns: TableColumnType<any>[]
    columnActionTypes: TableColumnActionType[]
    controllerUrl?: ControllerType
    isFixed?: boolean
    isEnabledWidth?: boolean
    isShowOverflowTooltip?: boolean
    isSwitch?: boolean
}
const props = withDefaults(defineProps<Props>(), {
    isFixed: true,
    isEnabledWidth: true,
    isShowOverflowTooltip: true,
    isSwitch: true,
})
const { authButtons } = useAdminStore()
const emit = defineEmits<{ onColumnAction: [action: TableColumnActionType, params: any] }>()
const actionColumnWidth = computed(() => {
    const length = props.columnActionTypes.length
    switch (length) {
        case 1:
            return 150
        case 2:
            return 200
        case 3:
            return 300
        case 4:
            return 350
        case 5:
            return 400
        case 6:
            return 480
    }
})
const onClick = (action: TableColumnActionType, params: any) => {
    emit('onColumnAction', action, params)
}
</script>

<style lang="scss" scoped></style>
